<template>
  <div class="detail" v-if="Object.keys(info).length">
    <!-- 商品详情轮播 -->
    <section>
      <swiper indicator-dots indicator-active-color="red">
        <swiper-item v-for="item in imgs" :key="item">
          <image :src="item" mode="widthFix" />
        </swiper-item>
      </swiper>
    </section>

    <!-- 商品信息 -->
    <section>
      <div class="prod-info">
        <div class="info">
          <!-- 信息 -->
          <div class="message">
            <p class="prod-tit">{{ info.prodName }}</p>
            <p class="sales-p">{{ info.brief }}</p>
          </div>
          <!-- 收藏 -->
          <div class="col" @click="collect(info.prodId)">
            <image
              :src="
                showCollect
                  ? '../../../static/images/icon/prod-col-red.png'
                  : '../../../static/images/icon/prod-col.png'
              "
            />
            <span>收藏</span>
          </div>
        </div>
        <p class="price">￥{{ info.price }}</p>
      </div>
    </section>

    <!-- 选了几件商品 -->
    <section class="showSku">
      <div class="tit">已选</div>
      <div class="con">3</div>
      <div class="more" @click="showSkuSelect=true">...</div>
    </section>

    <!-- 商品sku -->
    <van-popup
      :show="showSkuSelect"
      position="bottom"
      @close="showSkuSelect = false"
        custom-style="height: 20%;"
    >
    <div>dsfsdfdsfsdfsdfdsfds</div>
    <!-- <div>
          <section>
              <image :src="selectProd.pic" mode="widthFix">
              <div>
                  <p>¥ {{selectProd.price}}</p>
                  <p>库存{{selectProd.stocks}}件</p>
                  <p>
                      <span>已选</span>
                      <span>{{selectSku.join(',')}},{{num}}件</span>

                  </p>
              </div>
          </section>
          <section>
              <li class="sku-item" v-for="(item, index) in sku" :key="index">
                  <p>{{index}}</p>
                  <div>
                      <button @click="changeSelect(index, value, !availableSku[index].includes(value))" :class="{disable: !availableSku[index].includes(value), active: selectSku.includes(value)}" v-for="(value) in item" :key="value">{{value}}</button>
                  </div>
              </li>
          </section>
        </div> -->
    </van-popup>
    

    <!-- 评价 -->
    <section class="showComment">
      <div class="cmt-t">
        好评
        <span class="good">好评率0%</span>
      </div>
      <div class="count">
        共0条
        <span class="more"></span>
      </div>
    </section>

    <!--评价的选项-->
    <section class="tag">
      <div class="tagcon">
        <p>全部</p>
        <p>好评</p>
        <p>中评</p>
        <p>差评</p>
        <p>有图</p>
      </div>
    </section>

    <!-- <section>
            <p @click="showSkuSelect=true">
                <span>已选</span>
                <span>{{selectSku.join(',')}},{{num}}件</span>
                <span>...</span>
            </p>
            <van-popup
                :show="showSkuSelect"
                position="bottom"
                @close="showSkuSelect=false"
            >
                <div>
                    <section>
                        <image :src="selectProd.pic" mode="widthFix">
                        <div>
                            <p>¥ {{selectProd.price}}</p>
                            <p>库存{{selectProd.stocks}}件</p>
                            <p>
                                <span>已选</span>
                                <span>{{selectSku.join(',')}},{{num}}件</span>

                            </p>
                        </div>
                    </section>
                    <section>
                        <li class="sku-item" v-for="(item, index) in sku" :key="index">
                            <p>{{index}}</p>
                            <div>
                                <button @click="changeSelect(index, value, !availableSku[index].includes(value))" :class="{disable: !availableSku[index].includes(value), active: selectSku.includes(value)}" v-for="(value) in item" :key="value">{{value}}</button>
                            </div>
                        </li>
                    </section>
                </div>
            </van-popup>
      </section> -->

    <!-- 商品详情 -->
    <section class="prod-detail">
       <rich-text :nodes='info.content.replace(/(width=\")/g,"$1100% !important;").replace(/(height=\")/g,"$1auto !important;")'></rich-text>
    </section>

    <!-- 尾部 -->
    <div class="footer">
      <!-- 点击客服 -->
      <button class="btn icon" @click="goDialog">
        <image src="../../../static/images/icon/kefu.png"></image>
        客服
      </button>
      <!-- 点击购物车跳转到购物车页面 -->
      <div class="btn icon" @click="goShop">
        <image src="../../../static/images/tabbar/basket.png"></image>
        购物车
        <div class="badge badge-1">8</div>
      </div>
      <div class="btn cart" @click="showSkuSelect=true">加入购物车</div>
      <div class="btn buy">立即购买</div>
    </div>

    <!--客服弹框 -->
    <van-dialog id="van-dialog" />
  </div>
</template>

<script>
import Dialog from "@/static/vant/dist/dialog/index";
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      flag: false,
      //   sku: {}, // 所有可供选择的sku选项
      //   selectSku: [], // 当前选中的sku选项
      //   availableSku: {}, // 有库存的sku选项
      //   num: 1,
      showSkuSelect: false,
      //   isDisabled: false,
    };
  },
  computed: {
    ...mapState({
      info: (state) => state.cate.detail,
      showCollect: (state) => state.cate.showCollect,
      imgs: (state) => state.cate.imgs,
    }),
  },
  onLoad() {
    // console.log(this);
    // console.log(this.$mp.query.prodId);
    let id = this.$mp.query.prodId;
    this.getDetail(id);
    // console.log(this.info, "------------");
    this.isCollect(id);
    
  },
  methods: {
    ...mapActions({
      getDetail: "cate/getDetail",
      isCollect: "cate/isCollect",
      getCollect: "cate/getCollect",
    }),
    // 跳转到购物车页面
    goShop() {
      wx.switchTab({
        url: "/pages/basket/index",
      });
    },
    // 点击客服出现弹框
    goDialog() {
      // this.flag = !this.flag;
      // console.log(this.flag);
      Dialog.alert({
        title: "模拟进入客服会话",
        message: "开发者工具暂不支持打开客服会话，请使用真机调试",
      }).then(() => {
        // on close
      });
    },
    // 收藏
    collect(prodId) {
      // console.log(prodId);
      this.getCollect(prodId);
    },
    // 点击...出现弹框
    // change() {
    //   console.log('44444444444');
    //   console.log(this.showSkuSelect);
    //   this.showSkuSelect=true
    // },
  },
  // watch:{
  //   showCollect(){
  //     console.log('22222222222222');
  //   }
  // }
};
</script>

<style scoped>
swiper {
  height: 750rpx;
}
image {
  width: 100%;
}
.detail {
  height: auto;
  background: #eee;
}
.prod-tit {
  font-size: 32rpx;
  color: #333;
  padding-right: 20rpx;
}
.sales-p {
  background: #fff;
  line-height: 40rpx;
  color: #999;
  font-size: 24rpx;
  margin-top: 6rpx;
  margin-right: 104rpx;
}
.price {
  color: #eb2444;
  font-weight: 600;
  margin-right: 50rpx;
  font-size: 45rpx;
  height: 100rpx;
  line-height: 100rpx;
}
.col {
  position: absolute;
  top: 0;
  right: 0;
  width: 80rpx;
  color: #666;
  font-size: 20rpx;
  padding-left: 20rpx;
  text-align: center;
}
.col image {
  display: block;
  margin: auto;
  width: 40rpx;
  height: 40rpx;
}
.info {
  display: flex;
  position: relative;
  line-height: 40rpx;
  padding-right: 104rpx;
}
.prod-info {
  padding: 30rpx 30rpx 0 30rpx;
  position: relative;
  background: #fff;
}
.showSku {
  padding: 20rpx;
  background: #fff;
  margin-top: 20rpx;
  position: relative;
  line-height: 48rpx;
}
.tit {
  position: absolute;
  display: inline-block;
  width: 60rpx;
  left: 20rpx;
  font-size: 22rpx;
  top: 20rpx;
  color: #999;
}
.con {
  margin: 0 80rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 28rpx;
  font-weight: bold;
}
.more {
  position: absolute;
  right: 20rpx;
  width: 60rpx;
  top: 10rpx;
  text-align: right;
  font-size: 40rpx;
  color: #999;
  letter-spacing: 1px;
}
rich-text {
  width: 100%;
}
.prod-detail {
  background: #fff;
  margin-top: 20rpx;
  position: relative;
  line-height: 48rpx;
}
.showComment {
  font-size: 32rpx;
  position: relative;
  border-bottom: 1px solid #ddd;
  padding: 20rpx;
  background: #fff;
  margin-top: 20rpx;
}
.cmt-t {
  width: 300rpx;
}
.good {
  color: #eb2444;
  font-size: 24rpx;
  margin-left: 5rpx;
}
.count {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  font-size: 24rpx;
  color: #666;
  margin-right: 45rpx;
}
.count .more {
  width: 20rpx;
  height: 20rpx;
  border-top: 2rpx solid #999;
  border-right: 2rpx solid #999;
  transform: rotate(45deg);
  margin-left: 10rpx;
  display: inline-block;
}
.tag {
  padding: 0 20rpx;
  background: #fff;
}
.tagcon {
  position: relative;
  padding: 23px 3px 7px 0;
  margin: 0;
  display: flex;
}
.tag p {
  flex: 1;
  color: #666;
  font-size: 27rpx;
  height: 25rpx;
  line-height: 25rpx;
  border-radius: 3rpx;
  padding: 10rpx;
  margin: 0 10px 10px 0;
  background-color: #fdf0f0;
  text-align: center;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row nowrap;
  height: 98rpx;
  z-index: 999;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}
.footer .btn {
  position: relative;
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  width: 0;
  background-color: #fff;
  font-size: 28rpx;
  flex-flow: column;
}
.footer .btn.icon {
  flex-grow: 0;
  flex-shrink: 0;
  width: 125rpx;
  font-size: 20rpx;
  color: #666;
}
.footer .btn.icon image {
  width: 50rpx;
  height: 50rpx;
}
.footer .btn.cart {
  background: #584e61;
  color: #fff;
}
.footer .btn.buy {
  background: #eb2444;
  color: #fff;
}
.footer .cart-footer.gray .btn.buy {
  background: #ddd;
}
.footer .btn .badge-1 {
  position: absolute;
  top: 20rpx;
  left: 62rpx;
  display: inline-block;
  width: 28rpx;
  height: 28rpx;
  border-radius: 14rpx;
  background-color: #eb2444;
  text-align: center;
  line-height: 28rpx;
  font-size: 18rpx;
  color: #fff;
}
</style>